<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
  

    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    
<script>
function jsonp(url,params={callback:"callback"},fn){
  
  const script=document.createElement("script");
  let arr=[];
  if(typeof params==='function'){
      fn = params;
      params={callback:"callback"};
  }
  params={...params};
  for(var key in params){
    arr.push(`${key}=${params[key]}`);
  }
  script.src = `${url}${url.indexOf("?")==-1?'?':"&"}${arr.join('&')}`;  
  document.body.append(script);
  window[params.callback] =function(res){
      fn(res);
      document.body.removeChild(script);
  }

}
var url = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=河南&city=郑州" 
jsonp(url, (res)=>{
    console.log(res);
} )

Vue面试题
v-show和v-if的区别
为何v-for中要用key
 vue 组件通讯
 react 组件通讯
 jsx本质
 context 是什么，有何用途
shouldComponentUpdate的用途
描述redux单项数据流
setState是同步还是异步? (场景图,见下页)
框架综合应用
基于React设计-个todolist (组件结构, redux state数据结构)
基于Vue设计一个购物车(组件结构, vuex state数据结构)


webpack面试题
前端代码为何要进行构建和打包?
module chunk bundle分别什么意思,有何区别?
loader和plugin的区别?


webpack面试题
webpack如何实现懒加载?
webpack常见性能优化
babel-runtime和babel-polyfill的区别

面试官为何要这样考察?
保证候选人能正常工作一考察使用
多个候选人竞争时,选择有技术追求的一考 察原理

看候选人是否能独立承担项目一考 察设计能力


vue
自己去看文档不行吗?
行。但这种一种最低效的方式
 
文档是一个备忘录,给会用的人查阅,并不是入门教程
文档全面冗长且细节过多,不能突出面试考点


指令、插值
插值、表达式
指令、动态属性
v-html :会有XSS风险,会覆盖子组件


条件渲染
v-if v-else的用法,可使用变量,也可以使用===表达式
v-if和v-show的区别?
v-if和v-show的使用场景?
v-if
v-else-if
v-else
dom切换频繁 用v-show  一次显示与隐藏用v-if

computed和watch
computed有缓存, data不变则不会重新计算
watch如何深度监听?
 
watch监听引用类型,拿不到oldVal


循环(列表)渲染
 
如何遍历对象?一也可以用 v-for
key的重要性。key 不能乱写(如random或者index )
v-for和v-if不能一起使用!



事件
event参数,自定义参数
事件修饰符,按键修饰符
[观察]事件被绑定到哪里?

事件是原生的被挂载到当前元素




 



 

如何应对.上述面试题?
框架的使用(基本使用,高级特性,周边插件)
框架的原理(基本原理的了解,热~门技术的深度,全面性)


Vue组件使用
props和$emit
组件间通讯-自定义事件
组件生命周期
bus.$on("事件名",事件处理函数)
bus = new Vue();
bus.$off()
bus.$on

父子组件生命周期顺序
index created
list created
list mounted
index mounted
创建从外到内容，渲染从内到外。

index before update
list before update
list updated
index updated
更新看data


Vue高级特性
不是每个都很常用,但用到的时候必须要知道
考察候选人对Vue的掌握是否全面,且有深度
考察做过的项目是否有深度和复杂度(至少能用到高级特性)

Vue高级特性
◆自定义v-model
◆动态、异步组件
◆$nextTick
◆keep-alive
◆slot
◆mixin


slot
基本使用
作用域插槽
具名插槽


动态组件
<Component : is="NextTickName" />
 
<div v-for="(val, key) in newsData" :key="key">
<component : is="val.type"/> 
</div>

异步加载组件
formDemo:()=>import(xxx.vue);

keep-alive
缓存组件
频繁切换,不需要重复渲染
Vue常见性能优化
 keep-alive 切换就没有mounted
 
mixin
多个组件有相同的逻辑,抽离出来
mixin并环是完美的解决方案,会有一-些问题
Vue 3提出的Composition API旨在解决这些问题
minxins:[myMixin]


mixin的问题
变量来源不明确，不利于阅读
多mixin可能会造成命名冲突
mixin和组件可能出现多对多的关系,复杂度较高


相关的面试技巧

可以不太深入,但必须知道
熟悉基本用法，了解使用场景
最好能和自己的项目经验结合起来

export default {
    data(){return {city:"bj"}},
    methods:{
        showName(){
            console.log(this.name)
        }
    },
    mounted(){
        console.log("mixin mounted",this.name)
    }
}

Vuex基本概念
 state
 
mutation
 getters
 action


用于Vue组件
◆dispatch
◆mapGetters
◆commit
◆mapActions
◆mapState
◆mapMutations


Vue-router使用
面试考点并不多(前提是熟悉Vue )
路由模式( hash、
H5 history )
路由配置(动态路由、懒加载)

Vue-router路由模式
hash模式(默认) ,如http://abc.com/#/user/10
H5 history模式,如http://abc.com/user/20
imooc
后者需要server端支持,因此无特殊需求可选择前者

mode:'history'|'hash'

动态路由 路由参数
路由懒加载

 
Vuex Vue-router总结
面试考点并不多(前提是熟悉Vue )
 
掌握基本概念,基本使用
面试官时间有限,需考察最核心、最常用的问题,而非边角问题
增加验证，例如密码、短信验证码、指纹等
</script>
</body>
</html>